import * as echarts from 'echarts';
import { isNil, uniq } from "lodash-es";
import React from "react";
import { IProvinceGDP } from "../../core/interface";

export interface IProps {
    year: number;
    yearlyData: IProvinceGDP[];
}

/** 气泡图 */
const BubbleChart: React.FC<IProps> = (props) => {
    const { year, yearlyData } = props;
    const containerRef = React.useRef<HTMLDivElement>(null);
    const chartRef = React.useRef<echarts.ECharts>(null);
    const provinces = React.useMemo(() => {
        return uniq((yearlyData ?? []).map(item => item.province));
    }, [yearlyData]);
    const aData = React.useMemo(() => {
        return yearlyData.map(item => [item.gdp, item.healthInstitutions, item.population, item.province, `${item.year}`]);
    }, [yearlyData]);

    const renderChart = () => {
        if (isNil(containerRef.current) || isNil(aData)) return;
        const { width, height } = containerRef.current.getBoundingClientRect();
        const chartWidth = width;
        const chartHeight = height;
        const option = {
            // backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
            //     {
            //         offset: 0,
            //         color: '#f7f8fa'
            //     },
            //     {
            //         offset: 1,
            //         color: '#cdd0d5'
            //     }
            // ]),
            title: {
                text: `${year}年不同省份人口和GDP关系`,
                // left: '5%',
                top: '3%'
            },
            tooltip: {
                backgroundColor: 'rgba(255,255,255,0.7)',
                formatter: function (param) {
                    var value = param.value;
                    // prettier-ignore
                    return `<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">
                        ${year}年${value[3]}人口、GDP数据：
                        </div>
                        GDP：${value[0]} <br>
                        健康设施：${value[1]} <br>
                        人口：${value[2]} <br>
                       `;
                }
            },
            legend: {
                right: '10%',
                top: '3%',
                data: [year],
            },
            grid: {
                left: '8%',
                top: '15%'
            },
            xAxis: {
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                type: 'value',
                name: 'GDP',

            },
            yAxis: {
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                scale: true,
                type: 'value',
                name: '健康设施',
            },
            series: [
                {
                    name: "GDP",
                    data: aData,
                    type: 'scatter',
                    symbolSize: function (data) {
                        return !data[2] ? 0 : Math.sqrt(data[2]) / 2;
                    },
                    // emphasis: {
                    //   focus: 'series',
                    //   label: {
                    //     show: true,
                    //     formatter: function (param) {
                    //       return param.data[3];
                    //     },
                    //     position: 'top'
                    //   }
                    // },
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(120, 36, 50, 0.5)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: 'rgb(251, 118, 123)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(204, 46, 72)'
                            }
                        ])
                    }
                },
                //   {
                //     name: '2015',
                //     data: data[1],
                //     type: 'scatter',
                //     symbolSize: function (data) {
                //       return Math.sqrt(data[2]) / 5e2;
                //     },
                //     emphasis: {
                //       focus: 'series',
                //       label: {
                //         show: true,
                //         formatter: function (param) {
                //           return param.data[3];
                //         },
                //         position: 'top'
                //       }
                //     },
                //     itemStyle: {
                //       shadowBlur: 10,
                //       shadowColor: 'rgba(25, 100, 150, 0.5)',
                //       shadowOffsetY: 5,
                //       color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                //         {
                //           offset: 0,
                //           color: 'rgb(129, 227, 238)'
                //         },
                //         {
                //           offset: 1,
                //           color: 'rgb(25, 183, 207)'
                //         }
                //       ])
                //     }
                //   }
            ]
        };
        if (chartRef.current) {
            // update
            chartRef.current.setOption(option);
        } else {
            const chart = echarts.init(containerRef.current, undefined, {
                height: chartHeight,
                width: chartWidth,
            });

            chart.setOption(option);
            chartRef.current = chart;
        }
    };

    React.useEffect(() => {
        renderChart();
    }, [yearlyData]);

    return (
        <div className="bar-chart-for-health-contaienr" ref={containerRef} style={{
            width: '100%',
            height: '600px',
            verticalAlign: 'top',
        }}>

        </div>
    );
};

export default BubbleChart;